/**
 * @description 全局主题变量配置
 */
//颜色配置
$base-color-black: #222;
$base-color-blue: #1890ff;
$base-color-green: #13ce66;
$base-color-white: #fff;
$base-color-black: #515a6e;
$base-color-yellow: #ffba00;
$base-color-orange: #ff6700;
$base-color-red: #ff4d4f;
$base-color-grey: rgba(0, 0, 0, 0.65);
$base-color-background: #f6f8f9;

$base-color-text-primary: #303133;
$base-color-text-regular: #606266;
$base-color-text-secondary: #909399;
$base-color-text-placeholder: #c0c4cc;
$base-border-color-base: #dcdfe6;
$base-border-color-light: #e4e7ed;
$base-border-color-lighter: #ebeef5;
$base-border-color-extra-light: #f2f6fc;
$base-background-color-base: #f5f7fa;

//默认层级
$base-z-index: 1999;
//分栏最左侧菜单背景色
$base-column-first-menu-background: #282c34;
//分栏菜单背景色
$base-column-second-menu-background: #fff;
//分栏菜单选中背景色
$base-column-second-menu-active: mix($base-color-white, $base-color-blue, 10%);
//横向、纵向菜单背景色
$base-menu-background: #282c34;
//菜单文字颜色
$base-menu-color: hsla(0, 0%, 100%, 0.95);
//菜单选中文字颜色
$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
//菜单选中背景色
$base-menu-active: $base-color-blue;
//标题颜色
$base-title-color: #fff;
//字体大小配置
$base-font-size-small: 12px;
$base-font-size-default: 14px;
$base-font-size-big: 16px;
$base-font-size-bigger: 18px;
$base-font-size-max: 22px;
//最大宽度
$base-main-width: 1279px;
//圆角
$base-border-radius: 2.5px;
//边框颜色
$base-border-color: #dcdfe6;
//输入框高度
$base-input-height: 32px;
//默认margin
$base-margin: 20px;
//默认padding
$base-padding: 20px;
//默认阴影
$base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
//横向top-bar、logo、一级菜单的高度
$base-top-bar-height: 60px;
//纵向、综合、分栏logo的高度
$base-logo-height: 60px;
//顶部nav-bar的高度
$base-nav-height: 60px;
//顶部标签页tabs-bar的高度
$base-tabs-height: 50px;
//顶部标签页tabs-bar中每一个item的高度
$base-tag-item-height: 34px;
//菜单li标签的高度
$base-menu-item-height: 50px;
//app-main的高度
$base-keep-alive-height: calc(
  100vh - #{$base-nav-height} - #{$base-tabs-height} - #{$base-padding} * 2 - 55px
);
//纵向左侧导航未折叠的宽度
$base-left-menu-width: 266px;
//纵向左侧导航未折叠右侧内容的宽度
$base-right-content-width: calc(100% - #{$base-left-menu-width});
//纵向左侧导航已折叠的宽度
$base-left-menu-width-min: 64px;
//纵向左侧导航已折叠右侧内容的宽度
$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
//默认动画
$base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s,
  color 0.1s, font-size 0s;
//默认动画长
$base-transition-time: 0.3s;

:export {
  // 菜单文字颜色变量导出
  menu-color: $base-menu-color;
  // 菜单选中文字颜色变量导出
  menu-color-active: $base-menu-color-active;
  // 菜单背景色变量导出
  menu-background: $base-menu-background;
  // 分栏菜单背景色变量导出
  column-second-menu-background: $base-column-second-menu-background;
  // 导出圆角
  vab-border-radius: $base-border-radius;
}

:root {
  --vab-transition: #{$base-transition};
  --vab-padding: #{$base-padding};
  --vab-margin: #{$base-margin};
  --vab-keep-alive-height: #{$base-keep-alive-height};
  --vab-menu-active: #{$base-menu-active};
  --vab-menu-background: #{$base-menu-background};
  --vab-column-first-menu-background: #{$base-column-first-menu-background};
  --vab-column-second-menu-active: #{$base-column-second-menu-active};
  --vab-column-second-menu-background: #{$base-column-second-menu-background};

  --el-color-black: #{$base-color-black};
  --el-color-white: #{$base-color-white};
  --el-color-grey: #{$base-color-grey};
  --el-color-primary: #{$base-color-blue};
  --el-color-primary-light-1: mix(
    #{$base-color-white},
    #{$base-color-blue},
    10%
  );
  --el-color-primary-light-2: mix(
    #{$base-color-white},
    #{$base-color-blue},
    20%
  );
  --el-color-primary-light-3: mix(
    #{$base-color-white},
    #{$base-color-blue},
    30%
  );
  --el-color-primary-light-4: mix(
    #{$base-color-white},
    #{$base-color-blue},
    40%
  );
  --el-color-primary-light-5: mix(
    #{$base-color-white},
    #{$base-color-blue},
    50%
  );
  --el-color-primary-light-6: mix(
    #{$base-color-white},
    #{$base-color-blue},
    60%
  );
  --el-color-primary-light-7: mix(
    #{$base-color-white},
    #{$base-color-blue},
    70%
  );
  --el-color-primary-light-8: mix(
    #{$base-color-white},
    #{$base-color-blue},
    80%
  );
  --el-color-primary-light-9: mix(
    #{$base-color-white},
    #{$base-color-blue},
    90%
  );
  --el-color-success: #{$base-color-green};
  --el-color-success-light: mix(
    #{$base-color-white},
    #{$base-color-green},
    80%
  );
  --el-color-success-lighter: mix(
    #{$base-color-white},
    #{$base-color-green},
    90%
  );
  --el-color-warning: #{$base-color-yellow};
  --el-color-warning-light: mix(
    #{$base-color-white},
    #{$base-color-yellow},
    80%
  );
  --el-color-warning-lighter: mix(
    #{$base-color-white},
    #{$base-color-yellow},
    90%
  );
  --el-color-danger: #{$base-color-red};
  --el-color-danger-light: mix(#{$base-color-white}, #{$base-color-red}, 80%);
  --el-color-danger-lighter: mix(#{$base-color-white}, #{$base-color-red}, 90%);
  --el-color-error: #{$base-color-red};
  --el-color-error-light: mix(#{$base-color-white}, #{$base-color-red}, 80%);
  --el-color-error-lighter: mix(#{$base-color-white}, #{$base-color-red}, 90%);
  --el-color-info: #909399;
  --el-color-info-light: mix(#{$base-color-white}, #{#a5b2ce}, 80%);
  --el-color-info-lighter: mix(#{$base-color-white}, #{#909399}, 90%);
  --vab-border-radius-base: 2.5px;
}
